import React, {memo, useEffect, useState} from 'react';
import SingerDetailsStyle from "./IndexStyle";
import {Button, message, Table} from "antd";
import AlbumDetailsStyle from "../albumDetails/IndexStyle";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import MusicCoverItem from "../../../../components/part/musicCoverItem/MusicCoverItem";
import {getUserDetailsByIdApi} from "../../../../services/user";
import {UserVO} from "../../../../interface/UserInterface";
import {format} from "../../../../utils/dateFormat";
import {
  deleteFollowSingerApi,
  getFollowSingerByUserIdApi,
  insertFollowSingerApi
} from "../../../../services/followSinger";

type Props = {
  id:number,
};
type TableDataType={
  musicName:string,
  musicSinger:string,
  musicAlbum:string,
  musicTimer:number,
};

const SingerDetailsCover=memo(function (props:Props) {
  const [cover,setCover]=useState("");
  useEffect(() => {
    getUserDetailsByIdApi(props.id).then((result:any)=>{
      console.log(result);
      setCover(result.data.data.cover);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <SingerDetailsStyle $cover={cover}>
      <div className="singer-details-cover"></div>
    </SingerDetailsStyle>
  );
})

const SingerDetailsInfo=memo(function(props: Props) {
  /** 获取用户id */
  const userId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const [messageApi, contextHolder] = message.useMessage();
  const [user,setUser]=useState<UserVO>();
  /** 获取用户关注的歌手列表 */
  const [singerFollowList,setSingerFollowList]=useState<UserVO[]>([]);

  useEffect(() => {
    /** 获取歌手详情 */
    getUserDetailsByIdApi(props.id).then((result:any)=>{
      console.log(result);
      setUser(result.data.data);
    },(error)=>{
      console.log(error);
    });
    /** 获取登录用户关注列表 */
    getFollowSingerByUserId();
  }, []);



  /** 关注歌手按钮 */
  function followSingerBtn() {
    insertFollowSingerApi({userId,singerId:props.id}).then((result:any)=>{
      console.log(result);
      if (result.data.code===200){
        messageApi.open({
          type:"success",
          content:"关注成功",
        });
        //重新获取数据
        getFollowSingerByUserId();
      }else {
        messageApi.open({
          type:"error",
          content:"关注失败",
        });
      }
    },(error)=>{
      console.log(error);
    });
  }

  /** 取消关注歌手按钮 */
  function cancelFollowSingerBtn() {
    deleteFollowSingerApi({userId,singerId:props.id}).then((result:any)=>{
      if (result.data.code===200){
        messageApi.open({
          type:"success",
          content:"取消关注成功",
        });
        //重新获取数据
        getFollowSingerByUserId();
      }else {
        messageApi.open({
          type:"error",
          content:"取消关注失败",
        });
      }
    },(error)=>{
      console.log(error);
    });
  }

  /** 获取登录用户关注列表 */
  function getFollowSingerByUserId() {
    getFollowSingerByUserIdApi({pageNum:1,pageSize:10,userId}).then((result:any)=>{
      console.log(result);
      if (result.data.code===200){
        setSingerFollowList(result.data.data.data);
      }
    },(error)=>{
      console.log(error);
    });
  }

  return (
    <SingerDetailsStyle>
      {contextHolder}
      <div className="info-title">{user?.realname}</div>
      <div className="info-box">
        <div>外文名:{user?.otherName}</div>
        <div>国籍: {user?.nationality}</div>
        <div>职业: 歌手 音乐制作人</div>
        <div>生日: {format(user?.birthday)}</div>

      </div>
      <span className="singer-brief-introduction">
        简介:{user?.introduction}
      </span>
      <span className="more-introduction-btn">[更多]</span>
      <div className="btn-list-box">
        <Button className="iconfont album-details-btn select-btn" >&#xe87c; 播放热门歌曲</Button>
        {
          singerFollowList?.some((value)=>{
            return value.userId===props.id;
          })?
            <Button className="iconfont album-details-btn select-btn" onClick={cancelFollowSingerBtn}>&#xe86f; 已关注</Button>
            :
            <Button className="iconfont album-details-btn" onClick={followSingerBtn}>&#xe86f; 关注</Button>
        }
      </div>
    </SingerDetailsStyle>
  );
});

const SingerDetailsContent=memo(function(props: Props) {
  const {Column} = Table;
  const tableData:Array<TableDataType>=[
    {
      musicName:"把回忆拼接好给你",
      musicSinger:"王壹浪",
      musicAlbum:"把回忆拼接好给你",
      musicTimer:381
    },
    {
      musicName:"太阳(正式版)",
      musicSinger:"曲肖冰",
      musicAlbum:"太阳",
      musicTimer:257
    },
    {
      musicName:"用力活着",
      musicSinger:"张茜",
      musicAlbum:"用力活着",
      musicTimer:381
    },
    {
      musicName:"倒数",
      musicSinger:"邓紫棋",
      musicAlbum:"倒数",
      musicTimer:257
    },
  ]
  return (
    <SingerDetailsStyle>

      <UnitBox title={"热门歌曲"} size={30} isShowLine={true}>
        <Table dataSource={tableData} >
          <Column title="歌曲名称" dataIndex="musicName" key="musicName"
                  render={(_:any,record:TableDataType)=>{
                    return(<div className="music-name-td">
                      <span className="music-name">{record.musicName}</span>
                      <span className="music-btn music-play-btn iconfont">&#xe624;</span>
                      <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
                    </div>);
                  }}
          />
          {/*<Column title="歌手" dataIndex="musicSinger" key="musicSinger"/>*/}
          <Column title="专辑" dataIndex="musicAlbum" key="musicAlbum"/>
          <Column title="时长" dataIndex="musicTimer" key="musicTimer"
                  render={(_:any,record:TableDataType)=>{
                    return (<>{getHourMineSecondBySecond(record.musicTimer)}</>)
                  }}
          />
        </Table>
      </UnitBox>


      <UnitBox title={"专辑"} size={30} isShowLine={true}>
        <div className="singer-details-album-box">
          {
            Array.from(Array(9),(item, index)=>{
              return (
                <SongSheetItem
                  key={index}
                  coverUrl={"https://y.qq.com/music/photo_new/T002R300x300M000003JNNXP1UBH8o.jpg?max_age=2592000"}
                  songName={"哈哈"}
                  isShowCover={true}
                  size={185}
                />
              )
            })
          }
        </div>
      </UnitBox>

    </SingerDetailsStyle>
  );
});

const SingerDetailsSidebar=memo(function(props: Props) {
  return (
    <SingerDetailsStyle>
    </SingerDetailsStyle>
  );
});

export {SingerDetailsCover, SingerDetailsInfo, SingerDetailsContent, SingerDetailsSidebar};
